<script setup lang="ts">
import { ModalUtil } from '/@lib/utils/modal.ts'
import { sys_normal_disable } from '/@/const/Options.ts'
import { handleDataToTree } from '/@lib/utils/tree.ts'
import { useForm } from '/@lib/hooks/useForm.ts'
import { useLoading } from '/@lib/hooks/useLoading'
import { formatDateTime } from '/@lib/utils/tool.ts'
import { DeptQuery, DeptVO } from '/@/api/system/sysDept/types.ts'
import { ApiSysDept } from '/@/api/system/sysDept'
import AddOrUpdate from './AddOrUpdate.vue'

defineOptions({ name: 'sysDept' })

const { loading, showLoading, hideLoading } = useLoading()
// const queryFormRef = ref()
const { form: queryParams } = useForm<DeptQuery>({
  deptName: undefined,
  deptCategory: undefined,
  status: undefined
})
const tableRef = ref()
const tableData = ref<DeptVO[]>([])
const tableFixed = ref('right')
const AddOrUpdateRef = ref()

/** 新增按钮操作 */
const handleAdd = (row?: DeptVO) => {
  AddOrUpdateRef.value.openAdd(row, tableData.value)
}
/** 修改按钮操作 */
const handleUpdate = async (row: DeptVO) => {
  AddOrUpdateRef.value.openEdit(row, tableData.value)
}
/** 删除按钮操作 */
const handleDelete = async (row: DeptVO) => {
  const _id = row.deptId
  const _idLabel = row.deptName
  try {
    await ModalUtil.confirm('是否确认删除名称为【 ' + _idLabel + ' 】的数据项？')
    showLoading()
    await ApiSysDept.remove(_id)
    ModalUtil.msgSuccess('删除成功')
    await getTableList()
  } finally {
    hideLoading()
  }
}

const isExpandAll = ref(true)
/** 展开/折叠按钮操作 */
const handleToggleExpandAll = () => {
  isExpandAll.value = !isExpandAll.value
  toggleExpandAll(tableData.value, isExpandAll.value)
}
/** 展开/折叠所有 */
const toggleExpandAll = (data: any[], status: boolean) => {
  data.forEach((item: any) => {
    tableRef.value?.toggleRowExpansion(item, status)
    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
  })
}

const getTableList = async () => {
  showLoading()
  try {
    const res = await ApiSysDept.list(queryParams)
    const _treeData = handleDataToTree<DeptVO>(res, 'deptId')
    if (_treeData) {
      tableData.value = _treeData
    }
  } finally {
    hideLoading()
  }
}
getTableList()
const successCallback = () => {
  getTableList()
}
</script>

<template>
  <div class="page-container">
    <el-card shadow="never" class="flex-column flex-auto no-margin-bottom">
      <VipTableTool>
        <VipTableToolLeftPanel>
          <el-button icon="Plus" type="primary" @click="handleAdd">添加</el-button>
          <el-button icon="Sort" type="primary" plain @click="handleToggleExpandAll">
            {{ !isExpandAll ? '展开' : '折叠' }}
          </el-button>
        </VipTableToolLeftPanel>
      </VipTableTool>

      <div class="flex-auto">
        <el-table
          ref="tableRef"
          v-loading="loading"
          :data="tableData"
          border
          row-key="deptId"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :default-expand-all="isExpandAll"
          style="height: 100%"
        >
          <!--          <el-table-column type="selection" align="center" width="50" />-->
          <el-table-column type="index" align="center" label="序号" width="55" />

          <!--  主内容   -->
          <el-table-column prop="deptName" label="部门名称"></el-table-column>
          <!--          <el-table-column prop="deptCategory" align="center" label="类别编码" width="200"></el-table-column>-->
          <el-table-column prop="sortNum" align="center" label="排序" width="200"></el-table-column>
          <el-table-column prop="status" align="center" label="状态" width="100">
            <template #default="{ row }">
              <VipDictTag :options="sys_normal_disable" :value="row.status" />
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="200">
            <template #default="{ row }">
              <span>{{ formatDateTime(row.createTime) }}</span>
            </template>
          </el-table-column>

          <!--  操作栏   -->
          <el-table-column label="操作" :fixed="tableFixed" align="center" width="160">
            <template #default="{ row }">
              <el-space>
                <el-button text type="primary" link @click="handleUpdate(row)">修改</el-button>
                <el-button text type="primary" link @click="handleAdd(row)">新增</el-button>
                <el-button text type="danger" link @click="handleDelete(row)">删除</el-button>
              </el-space>
            </template>
          </el-table-column>

          <template #empty>
            <el-empty class="vip-data-empty" description="暂无数据" />
          </template>
        </el-table>
      </div>
    </el-card>

    <AddOrUpdate ref="AddOrUpdateRef" @submit-success="successCallback"></AddOrUpdate>
  </div>
</template>

<style scoped lang="scss"></style>
